<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="对网页的一段概括性描述" />
		<meta name="keywords" content="关键字1,关键字2,关键字3..." />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>觉唯设计_用户体验设计分享平台</title>
		<!--<link resl="shortcut ico n" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link rel="shortcut icon" href="" />
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
		<!--奥森字体-->
		<link rel="stylesheet/less" type="text/css" href="less/index.less">
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/index.css" />
		<style type="text/css">
			@media only screen and (max-width: 768px) {
				.jw-web-nav-inner {
					display: block;
					height: 50px;
				}
				.jw-web-nav-inner {
					display: block;
				}
				.jw-header-nav-logo,
				.jw-header-nav-inner,
				.jw-header-nav-seach,
				.jw-wrapper-menu {
					display: none;
				}
				.jw-banner-transparent {
					height: 50px;
				}
				.jw-container .jw-wrapper-scroll .jw-wrapper-scroll-inner,
				.jw-container .jw-wrapper-scroll .jw-wrapper-scroll-banner {
					float: none;
					width: 100%;
				}
				.jw-wrapper-scroll-banner {
					display: none;
				}
				.jw-container .jw-wrapper-group .jw-wrapper-all-group .jw-wrapper-group-inner {
					width: 50%;
					margin: 0 25% 0 25%;
					text-align: center;
				}
				.jw-container .jw-wrapper-group .Tab-bar ul li {
					margin: 0;
					padding: 2px 5px;
				}
				.jw-container .jw-love {
					background: white;
				}
				.jw-container .jw-love .jw-love-content {}
				.jw-container .jw-love .jw-love-content-button a {
					width: 80%;
				}
				.jw-container .jw-love .jw-love-content .jw-love-content-list {
					width: 50%;
					padding: 0;
					margin: 0;
				}
				.jw-container .jw-users .jw-users-gruop-item {
					margin: 0 auto;
				}
				.jw-container .jw-users .jw-users-gruop-item p {
					margin-left: 17%;
				}
				.jw-container .jw-users .jw-users-gruop-item h3 {
					line-height: 12px;
				}
				.jw-container .jw-feature .jw-feature-inner .jw-feature-gruop-item {
					float: none;
					width: 100%;
				}
				.jw-footer .jw-contenr .jw-footer-nav-group {
					float: none;
				}
				.jw-footer .jw-contenr .jw-footer-nav-group .jw-title {
					padding-left: 10px;
				}
				.jw-footer .jw-contenr .jw-footer-nav-group p,
				.jw-footer .jw-contenr .jw-footer-nav-group a {
					padding-left: 10px;
					letter-spacing: 2px;
					line-height: 15px;
				}
				.jw-footer .jw-contenr .jw-footer-nav-group .jw-footer-nav-group-title {
					margin-left: 7.764706px;
				}
				.jw-wrapper-group-inner {
					width: 50%;
					margin: 0 auto;
				}
				.jw-header .jw-header-nav .jw-web-nav-inner {
					display: block;
				}
				.jw-footer .jw-contenr{
					display: none;
				}
			}
			
			@media only screen and (min-width: 768px) and (max-width: 1024px) {
				.jw-header {
					width: 100%;
				}
				.jw-web-nav-inner {
					display: block;
				}
				.jw-web-nav-inner {
					display: block;
					height: 50px;
				}
				.jw-header-nav-logo,
				.jw-header-nav-inner,
				.jw-header-nav-seach {
					display: none;
				}
				.jw-banner-transparent {
					height: 140px;
				}
				.jw-wrapper-menu-inner {
					width: 100%;
				}
				.jw-wrapper-group-inner,
				.jw-wrapper-group-inner-left {
					width: 37.3%;
				}
				.jw-container .jw-wrapper-menu .jw-wrapper-menu-inner .jw-item {
					margin: 0 0.8%;
				}
				.jw-container .jw-wrapper-scroll .jw-wrapper-scroll-inner,
				.jw-container .jw-wrapper-scroll .jw-wrapper-scroll-banner {
					float: none;
					width: 70%;
					margin: 0 auto;
					margin-top: 20px;
				}
				.jw-container .jw-wrapper-group .jw-wrapper-all-group {
					width: 80%;
					margin: 0 auto;
					padding: 20px 0 20px 15%;
				}
				/*.jw-container .jw-wrapper-group .jw-wrapper-all-group img{
						  	width: 80%;
						  	height: 80%;
						  }*/
				.jw-container .jw-wrapper-group .jw-wrapper-all-group ul {}
				.jw-container .jw-wrapper-group .Tab-bar {
					width: 80%;
					margin: 0 auto;
				}
				.jw-container .jw-love .jw-love-content .jw-love-content-list {
					padding: 0;
					margin: 0;
					width: 25%;
				}
				.jw-container .jw-wrapper-group .jw-wrapper-all-group .jw-wrapper-group-inner{
					width: 35.22%;
				}
				.jw-container .jw-love {
					background: #F1F1F1;
				}
				/*.jw-love-content{
						 	
						 	background-image: url(Image/love-bg.jpg);
						 	background-position: 100%;
						 }*/
				.jw-container .jw-users .jw-users-gruop-item p {
					margin-left: 30%;
				}
				.jw-container .jw-users .jw-users-gruop-item {
					width: 27.571429%;
				}
				.jw-container .jw-users .jw-users-gruop-item h3 {
					line-height: 16px;
				}
				.jw-container .jw-feature .jw-feature-inner .jw-feature-gruop-item {
					width: 100%;
					margin: 0 auto;
					padding: 5px 0 5px 0;
				}
				.jw-footer .jw-contenr .jw-footer-nav-group p,
				.jw-footer .jw-contenr .jw-footer-nav-group a {
					line-height: 16px;
				}
				.jw-header .jw-header-nav .jw-web-nav-inner {
					display: block;
				}
				
			}
		</style>
	</head>

	<body>
		<!--头部-->
		<header class="jw-header" id="jw-header" style="opacity: .5;">
			<nav class="jw-header-nav clearfix">
				<div class="jw-web-nav-inner" style="opacity: 1;">
					<ul class="clearfix">
						<li class="subnav-inner" onclick="websubnav()"><i class="fa fa-bars" id="fa-bars" style="line-height: 40px;"></i> <i class="fa fa-times" id="fa-times" onclick=" websubnavhidn() " style="display: none; line-height: 40px;"></i></li>
						<li class="subnav-inner"><i class="fa fa-jwlogo"><img src="Image/download.png" width="100%" height="100%"/></i></li>
						<li class="subnav-inner"><i class="fa fa-user"></i></li>
						<div class="web-subnav-inner" id="web-subnav-inner">
							<p>
								<a href="#">文章</a>
							</p>
							<p>
								<a href="#">欣赏</a>
							</p>
							<p>
								<a href="#">素材</a>
							</p>
							<p>
								<a href="#">兑换</a>
							</p>
							<p>
								<a href="#">活动</a>
							</p>
							<p>
								<a href="#">唯然</a>
							</p>
							<p>
								<a href="#">更多</a>
							</p>
						</div>
					</ul>
				</div>
				<div class="jw-header-nav-logo">
					<a href="index.html" class="jw-logo">
						<img src="Image/downloads.png" width="100%" height="100%" />
					</a>
				</div>
				<div class="jw-header-nav-inner">
					<ul class="clearfix">
						<li class="nav-inner nav-article clearfix">
							<a href="jw-article.html" class="nav-menu">文章</a>
						</li>
						<li class="nav-inner">
							<a href="jw-enjoy.html" class="nav-menu">欣赏</a>
						</li>
						<li class="nav-inner">
							<a href="jw-material.html" class="nav-menu">素材</a>
						</li>
						<li class="nav-inner">
							<a href="jw-exchange.html " class="nav-menu">兑换</a>
						</li>
						<li class="nav-inner">
							<a href="jw-activity.html" class="nav-menu">活动</a>
						</li>
						<li class="nav-inner">
							<a href="jw-wr.html" class="nav-menu">唯然</a>
						</li>
						<li class="nav-inner">
							<a href="jw-more.html" class="nav-menu">更多</a>
						<div class="subnav-inner-more">
								<p><a href="">关于觉唯</a></p>
								<p><a href="">留言联系</a></p>
							</div>
						</li>
							
					</ul>
				</div>
				<div class="jw-header-nav-seach">
					<ul class="clearfix">
						<li class="jw-nav-inner-toggle">

							<div class="jw-login" onclick="login()">
								登录
							</div>

							<div class="jw-registered" onclick="registereds()">
								注册
							</div>

						</li>
						<li class="jw-nav-inner-search">
							<a href=""><i class="fa fa-search"></i></a>
						</li>
					</ul>
				</div>

			</nav>
		</header>
		<!--banner-->
		<!--登陆-->
		<section class="jw-login-wrapper" id="jw-login-wrapper">
			<div class="colse-login" id="colse-login" onclick="hiddlogins()">
				<p>x</p>
			</div>
			<div class="jw-login-body">
				<div class="jw-login-hearder">
					<p id="toggetregistered">切换注册</p>
				</div>
				<div class="jw-login-container">
					<p>登录</p>
					<form action="#" method="post">

						<div class="">
							<input type="text" id="" value="" placeholder="请输入用户名或邮箱" /><i class="fa fa-user"></i>
						</div>

						<div class="">
							<input type="password" id="" value="" placeholder="请输入密码" /><i class="fa fa-lock"></i>
						</div>
						<div class="">
							<span id="">
								<input type="checkbox" name="" id="" value="" />记住我的登录
							</span>
							<span id="" style="width: 50%">
								忘记密码？
							</span>
						</div>
						<div class="">
							<input type="submit" id="" name="" value="登录" />
						</div>

					</form>
				</div>
				<div class="jw-login-footer">
					<p>您也可以使用第三方帐号快捷注册</p>
					<button>QQ一键登录</button>
				</div>
			</div>

		</section>
		<!--登陆 end-->
		<!--注册-->
		<section class="jw-registered-wrapper" id="jwRegisteredInner">
			<div class="colse-registered colse-login" id="colse-registered">
				<p onclick="hiddregistereds()">x</p>
			</div>
			<div class="jw-registered-body">
				<div class="jw-registered-hearder">
					<p id="toggetlogin toggetregistered" onclick="toggetlogins()" >切换登陆</p>
				</div>
				<div class="jw-registered-container">
					<p>注册</p>
					<form action="#" method="post">
						<div id="">
							<input type="text" name="" id="" value="" placeholder="请输入英文用户名" /><i class="fa fa-user"></i>
						</div>
						<div class="">
							<input type="text" id="" value="" placeholder="请输入常用邮箱" /><i class="fa fa-envelope"></i>
						</div>
						<div class="">
							<input type="password" id="" value="" placeholder="密码最小长度为6" /><i class="fa fa-lock"></i>
						</div>
						<div class="">
							<input type="password" id="" value="" placeholder="请再次输入密码" /><i class="fa fa-retweet"></i>
						</div>
						<div class="">
							<input type="submit" id="" name="" value="注册" />
						</div>

					</form>
				</div>
				<div class="jw-registered-footer">
					<p>您也可以使用第三方帐号快捷注册</p>
					<button>QQ一键登录</button>
				</div>
			</div>

		</section>
		<!--注册 end-->
		<section class="jw-banner clearfix">

			<!--<img src="Image/121337027dbf4afd9fc9eb0.png" alt="觉唯背景" width="100%" height="100%" />-->
			<section class="jw-banner-wrapper">
				<div class="jw-banner-wrapper-inner">
					<h1>热爱生活  享受乐趣</h1>
					<p>Love life and enjoy the fun.</p>
				</div>

			</section>
		</section>
		<div class="jw-banner-transparent">

		</div>
		<!--<div class="jw-banner-hidden"></div>-->
		<!--返回顶部-->
		<section class="jw-backtop" id="jw-backtop" onclick="returntop()">
				<a >
					<i class="fa fa-angle-up"></i>
				</a>
		</section>

		<!--返回顶部 end-->
		<!--内容-->
		<section class="jw-container">
			<section class="jw-wrapper clearfix">
				<!--menu-->

				<section class="jw-wrapper-menu">
					<div class="jw-wrapper-menu-inner">
						<ul class="clearfix">
							<li class="jw-item">
								<a href=""><i class="fa fa-bullhorn"></i></a>
							</li>
							<li class="jw-item">
								<a href="" title="用户中心正式上线"><time>[03-22]</time>用户中心正式上线</a>
							</li>
							<li class="jw-item">
								<a href="" title="用户中心正式上线"><time>[03-22]</time>用户中心正式上线</a>
							</li>
							<li class="jw-item">
								<a href="" title="用户中心正式上线"><time>[03-22]</time>用户中心正式上线</a>
							</li>
							<li class="jw-item">
								<a href="" title="用户中心正式上线"><time>[03-22]</time>用户中心正式上线</a>
							</li>
							<li class="jw-item">
								<a href="" title="用户中心正式上线"><time>[03-22]</time>用户中心正式上线</a>
							</li>
						</ul>
					</div>
				</section>
				<!--menu  end-->
				<!--子内容1-->

				<section class="jw-wrapper-scroll clearfix">
					<div class="jw-wrapper-scroll-div clearfix">
						<section class="jw-wrapper-scroll-inner clearfix">
							<div class="img">
								<div class="scorllimg" id="scorllimg">

									<div class="bg">
										<img src="Image/12215358876b9b48232955f.jpg" width="100%" height="100%" />
									</div>
									<div class="bg">
										<img src="Image/20235402b31dda0947d4c4f.png" width="100%" height="100%" />
									</div>
									<div class="bg">
										<img src="Image/22143930d336eee5d32eabd.jpg" width="100%" height="100%" />
									</div>
									<div class="bg">
										<img src="Image/12215358876b9b48232955f.jpg" width="100%" height="100%" />
									</div>

								</div>
								<div class="btn btn1" style="display: none;">
									>
								</div>
								<div class="btn btn2" style="display: none;">
									</div>
										<div id="tabs">
											<div class="libg bgnumber"></div>
											<div class="libg"></div>
											<div class="libg"></div>
											<div class="libg"></div>
										</div>

								</div>
						</section>
						<section class="jw-wrapper-scroll-banner">
							<div class="jwws-banner-inner-left">
								<a href=""><img src="Image/0f000nNRGcA3e0smhKqEPs.jpg" title="广告" style="width: 100%; height: 100%;" /></a>
							</div>
							<div class="jwws-banner-inner-right">
								<a href=""><img src="Image/0f000FMVeN5EQYO-5dGZt6.jpg" title="广告" style="width: 100%; height: 100%;" /></a>
							</div>
						</section>
						</div>
				</section>
				<!--子内容1  END-->
				<!--子内容2  -->
				<section class="jw-wrapper-group clearfix">
					<div class="jw-wrapper-all-group clearfix">
						<ul class="clearfix">
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
										<a href=""><i class="fa fa-fire"></i></a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>
							<li class="jw-wrapper-group-inner jw-wrapper-group-inner-left" id="jw-wrapper-group-inner">

								<div class="jw-wrapper-group-inner-pic">
									<div class="jw-wrapper-pic-hover clearfix" id="jw-wrapper-pic-hover">
										<a href="#"><i class="fa fa-bookmark"></i>绘画艺术</a>
									</div>
									<a href="#"><img src="Image/22143156a8d2ec85eaf9840.jpg" class="jw-group-pic" style="width: 100%; height: 100%;" alt="日本插画" /></a>

								</div>
								<div class="jw-wrapper-pic-hover-bg">

								</div>
								<div class="jw-wrapper-group-inner-mata">
									<a href="#">日本插画师花瀬：漂亮的和服题材插画</a>
								</div>
								<div class="times">
									<time>2016-08-22</time>
									<span>
										<i class="fa fa-heart">3</i><i class="fa fa-comment">2</i>
									</span>
								</div>
							</li>

						</ul>
					</div>
					<div class="Tab-bar">
						<ul class="clearfix">
							<li class="pager-active">1</li>
							<li>2</li>
							<li class="pager-ellipsis">...</li>
							<li>20</li>
							<li>></li>
							<li>共20页</li>
							<li class="jw-input"><input type="text" id="" value="" /></li>
							<li class="jw-input-btn">GO</li>

						</ul>
					</div>
				</section>

				<!--子内容2  END-->

				<section class="jw-love clearfix">
					<div class="jw-love-content">
						<ul class="clearfix">
							<li class="jw-love-content-list">
								<!--<img width="360" height="300" alt="金所炫" src="http://static.jiawin.com/uploads/2016/10/0310313946c4f3f7360db85.jpeg?imageView2/1/w/360/h/300" srcset="http://static.jiawin.com/uploads/2016/10/0310313946c4f3f7360db85.jpeg?imageMogr2/thumbnail/!720x600r/gravity/Center/crop/720x600/dx/0/dy/0 2x">-->
								<img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>
							</li>
							<li class="jw-love-content-list">
								<img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>

							</li>
							<li class="jw-love-content-list"><img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>
							</li>
							<li class="jw-love-content-list"><img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>
							</li>
							<li class="jw-love-content-list"><img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>
							</li>
							<li class="jw-love-content-list"><img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>
							</li>
							<li class="jw-love-content-list"><img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>
							</li>
							<li class="jw-love-content-list"><img src="Image/031031256446d860dbbfe54.png" width="100%" height="100%" />
								<div class="jw-love-content-list-pic">
									<div class="icon-fa-link">
										<i class="fa fa-link"></i>
									</div>
									<div class="icon-inner">
										<p>爱情海壁纸</p>
										<a href="#">
											14小时前
										</a>
										<span>
										<i class="fa fa-comment-o"></i>6
										<i class="fa fa-eye"></i>9
										<i class="fa fa-heart-o"></i>2
									</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="jw-love-content-button clearfix">
						<a href="">取悦于灵感 - Love Inspiration<i class="fa fa-chevron-circle-right"></i></a>
					</div>
				</section>
			</section>
			<section class="clearfix jw-users">
				<div class="jw-users-gruop">
					<ul class="clearfix">
						<li class="jw-users-gruop-item">
							<p class="icon-bg"><i class="fa fa-search jw-users-gruop-item-seach"></i></p>
							<h2 class="title">探索发现</h2>
							<h3 class="title-botton">探索创造性的思维，发现引领最新的设计潮流</h3>
						</li>
						<li class="jw-users-gruop-item jw-users-gruop-item-center">
							<p class="icon-bg"><i class="fa fa-user"></i></p>
							<h2 class="title">用户设计</h2>
							<h3 class="title-botton">以用户为中心，以体验为至上，以细节为成败</h3>
						</li>
						<li class="jw-users-gruop-item">
							<p class="icon-bg"><i class="fa fa-paper-plane-o"></i></p>
							<h2 class="title">情感传递</h2>
							<h3 class="title-botton">不只是图文信息，更多的是喜怒哀乐的情感</h3>
						</li>
					</ul>
				</div>
			</section>
			<section class="jw-feature">

				<div class="jw-feature-inner clearfix">

					<div class="jw-feature-gruop-item">
						<img src="Image/10150311fe2104fef62de3b.jpg" width="100%" height="100%" />
					</div>

					<div class="jw-feature-gruop-item" style="margin: 0 5px 0 5px;">
						<img src="Image/1015044357fcddfbb3540a6.jpg" width="100%" height="100%" />
					</div>

					<div class="jw-feature-gruop-item" style="margin: 0 5px 0 0px;">
						<img src="Image/10150311fe2104fef62de3b.jpg" width="100%" height="100%" />
					</div>

					<div class="jw-feature-gruop-item">
						<img src="Image/1015044357fcddfbb3540a6.jpg" width="100%" height="100%" />
					</div>
				</div>
			</section>

		</section>

		<!--底部-->
		<footer class="jw-footer clearfix">
			<div class="jw-contenr">
				<nav class="jw-footer-nav clearfix">
					<aside class="jw-footer-nav-group">
						<h3 class="jw-footer-nav-group-title jw-title">觉唯</h3>
						<p class="describe-text">以用户为中心的设计理念，专注于用户体验设计，拥有国内外最新的设计潮流趋势、独特而美的创意视觉、新颖而灵敏的思维意识、极致而生动的交互体验，更有严谨而通俗的技术教程！</p>
						<p class="describe-text">唯然是觉唯网的图片分享社区，以记录美丽、分享美好的创意理念，分享高品质创意、艺术、设计、时尚、插画、摄影、唯美类精美图片。</p>
					</aside>
					<aside class="jw-footer-nav-group">
						<h3 class="jw-footer-nav-group-title">关于</h3>
						<div class="jw-footer-nav-group-menu">
							<ul class="menu">
								<li>
									<a href="">关于觉唯</a>
								</li>
								<li>
									<a href="">留言联系</a>
								</li>
								<li>
									<a href="">友情链接</a>
								</li>
								<li>
									<a href="">免责声明</a>
								</li>
								<li>
									<a href="">网站地图</a>
								</li>
							</ul>
						</div>
					</aside>
					<aside class="jw-footer-nav-group">
						<h3 class="jw-footer-nav-group-title">栏目</h3>
						<div class="jw-footer-nav-group-menu">
							<ul class="menu">
								<li>
									<a href="">关于觉唯</a>
								</li>
								<li>
									<a href="">留言联系</a>
								</li>
								<li>
									<a href="">友情链接</a>
								</li>
								<li>
									<a href="">免责声明</a>
								</li>
								<li>
									<a href="">网站地图</a>
								</li>
							</ul>
						</div>
					</aside>
					<aside class="jw-footer-nav-group">
						<h3 class="jw-footer-nav-group-title">友链</h3>
						<div class="jw-footer-nav-group-menu">
							<ul class="menu">
								<li>
									<a href="">前端观察</a>
								</li>
								<li>
									<a href="">免责声明</a>
								</li>
								<li>
									<a href="">网站地图</a>
								</li>
							</ul>
						</div>
					</aside>
					<aside class="jw-footer-nav-group jw-follow">
						<h3 class="jw-footer-nav-group-title follow">关注</h3>
						<ul>
							<li>
								<a href="" class="jw-email-address">Email:</a>
								<a href="" class="jw-email-address">javin@jiawin.com</a>
							</li>
							<li class="jw-social-email">
								<form action="" method="post">
									<input type="hidden" name="" value="">
									<input type="hidden" name="" value="">
									<div class="jw-social-email">
										<input class="jw-email" id="" name="" type="email" placeholder="请输入您的邮箱" required="">
										<input class="jw-submit" type="submit" value="订阅">
									</div>
								</form>
							</li>
							<li class="jw-social-icon clearfix">
								<a class="jw-social-sina" href=""><i class="fa fa-weibo"></i><span class="jw-text-replace"></span></a>
								<a class="jw-social-qqwb" href=""><i class="fa fa-tencent-weibo"></i><span class="jw-text-replace"></span></a>
								<a class="jw-social-qq" href=""><i class="fa fa-qq"></i><span class="jw-text-replace"></span></a>
								<a class="jw-social-rss" href=""><i class="fa fa-rss"></i><span class="jw-text-replace"></span></a>
								<a class="jw-social-weixin" href="" class="jw-social-weixin"><i class="fa fa-weixin"></i><span class="jw-text-replace"></span></a>
							</li>
						</ul>
					</aside>
				</nav>
			</div>

			<section class="jw-company clearfix">
				<div class="jw-company-wrapper">

					<p class="jw-company-contenr">Copyright © 2012-2016 觉唯设计 Theme by Javin zhong All All Rights Reserved. 粤ICP备12073831号-1</p>
				</div>
			</section>
		</footer>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/jquery.rotate.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/index.js"></script>
		<script>
			window.onload=function(){
				var obj = document.getElementById("jw-backtop");
				var headernav = $('#jw-header');
					var scrollTop = 0;
					obj.onclick = function() {
					var timer = setInterval(function() {
						window.scrollBy(0, -100);
						if(scrollTop == 0) {
							clearInterval(timer);
						}
					}, 20);
					
				}				
			window.onscroll = function() {
				scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;				
				if(scrollTop >= 100) {
					obj.style.display = "block";
					headernav.css('opacity','1');
				} else {
					obj.style.display = "none";
					headernav.css('opacity','.5');
					$('.web-subnav-inner').animate({opacity:"1"},400);
				}

			}
			
}
		</script>
	</body>

</html>